<script setup lang="ts">
import updateDialog from './dialog/update/index.vue';
import loadingMask from './view/loading-mask/index.vue';
import { Plus } from '@element-plus/icons-vue';
import { tableConfig } from './config/table-config';
import { doGetClassSystemList, doDelClassSystem } from '@/api/base/workCalendar/shiftSystem/index';
import { useUpdate } from './hooks/useUpdate';
import paramsStore from '@/store/modules/paramsStore';
import addDataStore from '@/store/modules/addDataStore';
import type { ClassSystem } from '@/api/base/workCalendar/shiftSystem/model/type';

const { handleAddData } = addDataStore();

const router = useRouter();

const { setEquipmentNumber } = paramsStore();

const disabled = (row: ClassSystem) => row.unEditable;

const tableRef = ref<TableRef>();

/**
 * @: 处理工作设备列表
 */
const mapCollection = (item: ClassSystem) => {
    return item.equipmentCollection?.map(item => item.deviceCode).join(',');
};

/**
 * @: 跳转到设备管理
 */
const jumpEquipment = (row: ClassSystem) => {
    const equipmentNumber = mapCollection(row);
    setEquipmentNumber(equipmentNumber);
    router.push('/equipment');
};

/**
 * @: 获取数据
 */
const getData = () => {
    tableRef.value?.getData?.();
};

// 重新排班的hooks
const { loadingShow, classSystemUpdate } = useUpdate(getData);

/**
 * @: 删除单行
 */
const rowDel = async (row: ClassSystem & { btnLoading: boolean }) => {
    try {
        row.btnLoading = true;
        await doDelClassSystem({ id: row.id });
        classSystemUpdate();
    } catch (error) {
        console.log('err', error);
    }
    row.btnLoading = false;
};

// 编辑新增相关
const updateRef = ref<InstanceType<typeof updateDialog>>();

/**
 * @: 新增
 */
const handleAdd = () => {
    handleAddData('classSystemAddData');
    tableRef.value?.clearSelection();
    router.push('/workCalendar/shiftSystem/add');
};

/**
 * @: 编辑
 */
const edit = (row: ClassSystem) => {
    updateRef.value?.open(row);
};

/**
 * @: 查看
 */
const handleCheck = (row: ClassSystem) => {
    updateRef.value?.open(row, true);
};

/**
 * @: 复制相关
 */
const classSystemRow = ref<ClassSystem[]>([]);
const selection = (classSystem: ClassSystem[]) => {
    classSystemRow.value = classSystem;
};
</script>

<template>
    <div class="main">
        <base-table
            ref="tableRef"
            :table-config="tableConfig"
            :get-data-fn="doGetClassSystemList"
            :edit-disabled-fn="disabled"
            :del-disabled-fn="disabled"
            action-width="150"
            @edit="edit"
            @del="rowDel"
            @selection-change="selection"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增 </el-button>
            </template>
            <!-- 工作设备列表 -->
            <template #equipmentCollection="{ row }">
                <span class="link" @click="jumpEquipment(row)">
                    {{ mapCollection(row) }}
                </span>
            </template>

            <!-- 查看 -->
            <template #preBtn="{ row }">
                <el-link type="primary" @click="handleCheck(row)">查看</el-link>
            </template>
        </base-table>

        <!-- 编辑弹框 -->
        <update-dialog ref="updateRef" @getData="classSystemUpdate" />

        <!-- loading -->
        <loading-mask :loading-show="loadingShow" />
    </div>
</template>

<style scoped lang="scss">
@include b(main) {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1px 24px 16px;
}

:deep(.cell.el-tooltip) {
    &:has(.link) {
        color: var(--q-color-primary);
    }
}

@include b(link) {
    cursor: pointer;

    &:hover {
        border-bottom: 1px solid var(--q-color-primary);
    }
}
</style>
